<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="操作人" prop="userId">
            <el-select v-model.trim="filterForm.userId" placeholder="请选择操作人" style="width: 260px"
                       filterable>
              <el-option v-for="user in userList" :key="user.userId" :label="`${user.realName}-${user.account}`"
                         :value="user.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型" prop="operationType">
            <el-select v-model.trim="filterForm.operationType" placeholder="请选择操作类型">
              <el-option v-for="type in typeList" :key="type" :label="type"
                         :value="type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行结果" prop="status">
            <el-select v-model.trim="filterForm.status" placeholder="请选择执行结果">
              <!-- <el-option v-for="dict in dict.type.classroomResult" :key="dict.value"
                         :label="dict.label" :value="dict.value"></el-option> -->
              <el-option label="成功" :value="0"></el-option>
              <el-option label="失败" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间" prop="rangeTime">
            <el-date-picker
              v-model="filterForm.rangeTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <dt-table
        ref="dtTable"
        class="account-table"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
        @selection-change="selectionChange"
      >
        <template #toolbarBtn>
          <span>操作日志</span>
          <my-dialog-column
            class="dialog-export"
            :query="queryInfo"
            :columns="columns"
            :tableRef="$refs.dtTable"
            @exportStart="startExport"
            @queryTable="getList"
          />
        </template>
      </dt-table>
    </div>
  </div>
</template>

<script>
import myDialogColumn from '@/views/unifiedPayment/components/dialog-column/index.vue'
import { getPage, qryOperationType, qryAllSysUser } from '@/api/classroom/recordQuery'

export default {
  name: 'RecordQuery',
  components: { myDialogColumn },
  provide: {
    showOptArr: [
      'exportFile'
    ]
  },
  dicts: ['classroomResult'],
  data() {
    return {
      total: 0,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        userId: '',
        operationType: '',
        status: '',
        rangeTime: []
      },
      tableOpts: {
        rowKey: 'logId',
        tableData: [],
        firstTableCol: {
          select: true
        },
        indexTableCol: {
          index: true
        },
        toolbarBtn: [],
        tableCol: [
          {
            prop: 'operationType',
            label: '操作类型',
            show: true
          },
          {
            prop: 'userName',
            label: '操作人',
            show: true
          },
          {
            prop: 'operationDate',
            label: '操作时间',
            show: true
          },
          {
            prop: 'status',
            label: '执行结果',
            show: true,
            type: 'dict',
            formatter: (row) => { return this.dict.type.classroomResult }
          }
        ],
        operator: {}
      },
      loading: false,
      selectionRow: [],
      columns: [
        {
          prop: 'operationType',
          label: '操作类型',
          template: true,
          show: true
        },
        {
          prop: 'userName',
          label: '操作人',
          template: true,
          show: true
        },
        {
          prop: 'statusDescribe',
          label: '执行结果',
          template: true,
          show: true
        },
        {
          prop: 'operationDate',
          label: '操作时间',
          template: true,
          show: true
        }
      ],
      queryInfo: {
        menu: '记录查询',
        url: '/onlineClass/operationRecord/list',
        params: {},
        method: 'GET',
        selection: ''
      },
      fullLoading: null,
      dialogVisible: false,
      typeList: [],
      userList: []
    }
  },
  computed: {
    pickerOptions() {
      return {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    },
    detailOption() {
      return {
        labelWidth: '140px',
        width: '800px',
        column: 2,
        rows: [],
        data: {}
      }
    }
  },
  mounted() {
    this.refresh()
    this.init()
  },
  methods: {
    init() {
      qryOperationType().then((res) => {
        this.typeList = res.data
      })
      qryAllSysUser().then((res) => {
        this.userList = res.data
      })
    },
    handleAdd() {
      this.dialogVisible = true
    },
    startExport(type) {
      if (!type) {
        this.fullLoading = this.$loading({
          lock: true,
          text: '正在导出...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      } else {
        this.fullLoading && this.fullLoading.close()
      }
    },
    refresh() {
      this.getList()
    },
    selectionChange(val) {
      this.selectionRow = val
      this.queryInfo.selection = val.map((item) => item.logId)
      this.queryInfo.idProp = 'logId'
      // this.queryInfo.params.ids = this.queryInfo.selection
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    getList() {
      this.loading = true
      if (this.filterForm.rangeTime.length > 0) {
        this.filterForm.beginDate = this.filterForm.rangeTime[0]
        this.filterForm.endDate = this.filterForm.rangeTime[1]
      } else {
        this.filterForm.beginDate = ''
        this.filterForm.endDate = ''
      }
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-table {
  ::v-deep .flex-1 {
    display: none;
  }
  ::v-deep .table-opt-container {
    // justify-content: space-between;
    position: relative;
  }
}
.dialog-export {
  position: absolute;
  right: 0;
}
.form-wrap {
  padding: 0 50px;
}
</style>
